<template>
  <view class="mine-page">
    <!-- 背景装饰元素 -->
    <view class="bg-decorator">
      <view class="circle circle-1"></view>
      <view class="circle circle-2"></view>
      <view class="circle circle-3"></view>
    </view>
    
    <!-- 用户信息卡片 -->
    <view class="user-card" >
      <view class="card-bg" :style="{background: userCardBg}"></view>
      <view class="card-content" @click.native.stop="edit">
        <view style="display: flex;align-items: center;">
			<image :src="userInfo.avatar||'/static/default_avatar.jpg'" style="width: 120rpx;height: 120rpx;border-radius: 20rpx;" class="avatar" shape="circle"></image>
			  <view class="info" style="display: flex;align-items: center;justify-content: space-between;">
			    <view>
					<view class="name-row">
					  <text class="name">{{ userInfo.nickname }}</text>
					  <view class="badge" v-if="userInfo.is_vip>0">
					    <text class="role">{{ userInfo.is_vip }}</text>
					    <uni-icons type="medal" size="16" color="#FFD700"></uni-icons>
					  </view>
					</view>
					 <text class="school" v-if="!userInfo.college">未完善个人信息</text>
								    <text class="school" style="font-size: 25rpx;" v-else>{{ userInfo.college }} · {{ userInfo.major }} </text>
				</view>
					 
			    
			    
			  <uni-icons type="arrowright" size="18" color="rgba(255,255,255,0.8)"></uni-icons>
			</view>
		</view>
	  <view class="stats">
	      <view class="stat-item" @click.native.stop="follow(0)">
	        <text class="stat-value">{{userInfo.following_count}}</text>
	        <text class="stat-label">收藏</text>
	      </view>
	      <view class="stat-item" @click.native.stop="follow(1)">
	        <text class="stat-value" >{{userInfo.follower_count}}</text>
	        <text class="stat-label">粉丝</text>
	      </view>
	      <view class="stat-item">
	        <text class="stat-value" @click.native.stop="follow(2)">{{userInfo.like_count}}</text>
	        <text class="stat-label">点赞</text>
	      </view>
	    </view>
	  </view>
    </view>
    
    <!-- 钱包快捷入口 -->
    <view class="wallet-card" @click.native.stop="toWallet">
      <view class="wallet-header" >
        <uni-icons type="wallet" size="20" color="#FF9E00"></uni-icons>
        <text>我的钱包</text>
      </view>
      <view class="wallet-balance">
        <text class="balance">¥{{ userInfo.balance  }}</text>
        <text class="hint" @click.native.stop="toWalletDetils">点击查看详情</text>
      </view>
     <!-- <view class="wallet-actions">
        
        <view class="action-item" @click.stop="quickWithdraw">
          <uni-icons type="minus" size="16" color="#FF9E00"></uni-icons>
          <text>提现</text>
        </view>
      </view> -->
    </view>
    
    <!-- 功能列表 -->
    <view class="menu-container">
      <view class="menu-section">
        <view class="section-title">
          <uni-icons type="list" size="18" color="#FF5C8D"></uni-icons>
          <text>我的订单</text>
        </view>
        <view class="menu-grid">
          <!-- <view class="menu-item" @click="toOrder('/pages/mine/drivingOrder/order-list')">
            <view class="item-icon" style="background-color: #FFEEF2;">
              <uni-icons type="cart" size="20" color="#FF5C8D"></uni-icons>
            </view>
            <text>驾校报名</text>
          </view> -->
          <view class="menu-item" @click="toOrder('/pages/mine/student/student')">
            <view class="item-icon" style="background-color: #E6F7FF;">
              <uni-icons type="circle" size="20" color="#00B4D8"></uni-icons>
            </view>
            <text>专升本</text>
          </view>
          <view class="menu-item" @click="toOrder('/pagesA/errand-order-list')">
            <view class="item-icon" style="background-color: #F0FFF0;">
              <uni-icons type="map" size="20" color="#06D6A0"></uni-icons>
            </view>
            <text>跑腿</text>
          </view>
          <view class="menu-item" @click="toOrder('/pages/mine/order/order')">
            <view class="item-icon" style="background-color: #FFF8E6;">
              <uni-icons type="shop" size="20" color="#FF9E00"></uni-icons>
            </view>
            <text>其他交易</text>
          </view>
        </view>
      </view>
      
      <!-- 社交相关 -->
      <view class="menu-section">
        <view class="section-title">
          <uni-icons type="chat" size="18" color="#FF5C8D"></uni-icons>
          <text>服务与内容</text>
        </view>
        <view class="menu-list">
          <view class="menu-item" @click="toMyPosts">
            <view class="left">
              <view class="item-icon" style="background-color: #F5F0FF;">
                <uni-icons type="compose" size="20" color="#8A2BE2"></uni-icons>
              </view>
              <text>我的发布</text>
            </view>
            <view class="right">
              <!-- <text class="badge" v-if="unreadPostsCount > 0">{{ unreadPostsCount }}</text> -->
              <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
            </view>
          </view>
          <view class="menu-item" @click="toLoveLetters">
            <view class="left">
              <view class="item-icon" style="background-color: #FFEEF2;">
                <uni-icons type="heart" size="20" color="#FF5C8D"></uni-icons>
              </view>
              <text>我收到的</text>
            </view>
            <view class="right">
              <!-- <text class="badge" v-if="unreadLettersCount > 0">{{ unreadLettersCount }}</text> -->
              <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
            </view>
          </view>
         <!-- <view class="menu-item" @click="toMyFavorites">
            <view class="left">
              <view class="item-icon" style="background-color: #FFF0F5;">
                <uni-icons type="star" size="20" color="#FF1493"></uni-icons>
              </view>
              <text>我的收藏</text>
            </view>
            <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
          </view> -->
        </view>
      </view>
      
      <!-- 设置相关 -->
      <view class="menu-section">
        <view class="section-title">
          <uni-icons type="gear" size="18" color="#FF5C8D"></uni-icons>
          <text>设置与安全</text>
        </view>
        <view class="menu-list">
          <view class="menu-item" @click="toSettings">
            <view class="left">
              <view class="item-icon" style="background-color: #F0F0F0;">
                <uni-icons type="gear" size="20" color="#666"></uni-icons>
              </view>
              <text>账号设置</text>
            </view>
            <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
          </view>
          <!-- <view class="menu-item" @click="toPrivacy">
            <view class="left">
              <view class="item-icon" style="background-color: #E6F7FF;">
                <uni-icons type="locked" size="20" color="#1E90FF"></uni-icons>
              </view>
              <text>隐私设置</text>
            </view>
            <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
          </view> -->
          <view class="menu-item" @click="toFeedback">
            <view class="left">
              <view class="item-icon" style="background-color: #FFF0F5;">
                <uni-icons type="help" size="20" color="#FF6B81"></uni-icons>
              </view>
              <text>反馈帮助</text>
            </view>
            <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
          </view>
          <view class="menu-item" @click="toAbout">
            <view class="left">
              <view class="item-icon" style="background-color: #F5FFFA;">
                <uni-icons type="info" size="20" color="#2E8B57"></uni-icons>
              </view>
              <text>关于我们</text>
            </view>
            <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 底部装饰 -->
    <view class="bottom-decorator"></view>
	
	<BottomNav currentPage="profile"></BottomNav>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentRole: 'normal',
      unreadPostsCount: 3,
      unreadLettersCount: 5,
      userInfo: {
        avatar: '/static/avatar.jpg',
        nickname: '校园小助手',
        role: 'VIP会员',
        school: 'XX大学',
        major: '计算机科学与技术',
        balance: 0
      },
      colorGradients: [
        'linear-gradient(135deg, #FF9E9E, #FF5C8D)',
        'linear-gradient(135deg, #92A3FD, #9DCEFF)',
        'linear-gradient(135deg, #C58BF2, #EEA4CE)',
        'linear-gradient(135deg, #8EC5FC, #E0C3FC)'
      ],
	  fans:0,
	  liked:0,
	  followList:0
	}
  },
  mounted() {
  	
  },
  onShow() {
  	this.getUserInfo()
  },
  onLoad() {
  	
	
  },
  computed: {
    userCardBg() {
      // 根据用户ID或其他因素返回不同的渐变背景
      const index = this.userInfo.nickname.length % this.colorGradients.length
      return this.colorGradients[index]
    }
  },
  methods: {
	edit(){
		uni.navigateTo({
			url:'/pages/mine/edit/edit',
			animationType: 'slide-in-right',
			animationDuration: 300
		})
	},
	follow(i){
		switch(i){
			case 0:
				// uni.navigateTo({
				// 	url:'/pages/mine/follow/follow',
				// 	animationType: 'slide-in-right',
				// 	animationDuration: 300
				// })
			break;
			case 1:
				// uni.navigateTo({
				// 	url:'/pages/mine/likes/likes',
				// 	animationType: 'slide-in-right',
				// 	animationDuration: 300
				// })
				break;
			default:
			
				break;
		}
	},
	
	async getUserInfo(){
		const res = await this.$api.get('/user/getInfo','',true)
		if(res.data.code == 200){
			this.userInfo = res.data.data
			console.log('大大大大',this.userInfo)
		}
	},
    switchRole(role) {
		console.log('789')
      uni.showLoading({ title: '切换中...', mask: true })
	  this.currentRole = role
      setTimeout(() => {
        this.currentRole = role
        uni.hideLoading()
        uni.showToast({
          title: `已切换为${role === 'normal' ? '普通用户' : '匿名者'}模式`,
          icon: 'none',
          duration: 1500
        })
      }, 500)
    },
    toUserInfo() {
      uni.navigateTo({
        url: '/pages/mine/userinfo',
        animationType: 'slide-in-right',
        animationDuration: 300
      })
    },
    toWallet() {
		console.log('大撒大撒')
      uni.navigateTo({
        url: '/pages/mine/wallet/wallet',
        animationType: 'slide-in-right',
        animationDuration: 300
      })
    },
	toWalletDetils(){
		uni.navigateTo({
			url:'/pagesA/bill'
		})
	},
    quickRecharge() {
      uni.navigateTo({
        url: '/pages/mine/recharge',
        animationType: 'slide-in-right',
        animationDuration: 300
      })
    },
    quickWithdraw() {
      uni.navigateTo({
        url: '/pages/mine/withdraw',
        animationType: 'slide-in-right',
        animationDuration: 300
      })
    },
    toOrder(url) {
		if(!url) {
			uni.showToast({
				icon:'none',
				title:'暂未开发哦~'
			})
			return 
		}
      uni.navigateTo({
        url: url,
        animationType: 'slide-in-right',
        animationDuration: 300
      })
    },
    toMyPosts() {
      uni.navigateTo({
        url: '/pages/mine/myPosts/myPosts',
        animationType: 'slide-in-right',
        animationDuration: 300
      })
    },
    toLoveLetters() {
      uni.navigateTo({
        url: '/pages/mine/love-letters/love-letters',
        animationType: 'slide-in-right',
        animationDuration: 300
      })
    },
    toMyFavorites() {
      uni.navigateTo({
        url: '/pages/mine/favorites/favorites',
        animationType: 'slide-in-right',
        animationDuration: 300
      })
    },
    toSettings() {
      uni.navigateTo({
        url: '/pages/mine/accountSettings/accountSettings',
        animationType: 'slide-in-right',
        animationDuration: 300
      })
    },
    toPrivacy() {
      uni.navigateTo({
        url: '/pages/mine/privacy/privacy',
        animationType: 'slide-in-right',
        animationDuration: 300
      })
    },
    toFeedback() {
      uni.navigateTo({
        url: '/pages/mine/feedback/feedback',
        animationType: 'slide-in-right',
        animationDuration: 300
      })
    },
    toAbout() {
      uni.navigateTo({
        url: '/pages/mine/about/about',
        animationType: 'slide-in-right',
        animationDuration: 300
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.mine-page {
  position: relative;
  padding: 20rpx 20rpx 100rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
  overflow: hidden;
}

.bg-decorator {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  
  .circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 92, 141, 0.05);
    
    &.circle-1 {
      width: 400rpx;
      height: 400rpx;
      top: -100rpx;
      right: -100rpx;
    }
    
    &.circle-2 {
      width: 300rpx;
      height: 300rpx;
      bottom: 100rpx;
      left: -100rpx;
    }
    
    &.circle-3 {
      width: 200rpx;
      height: 200rpx;
      top: 50%;
      right: -50rpx;
    }
  }
}

.user-card {
  position: relative;
  // height: 260rpx;
  border-radius: 24rpx;
  margin-bottom: 30rpx;
  overflow: hidden;
  box-shadow: 0 10rpx 30rpx rgba(255, 92, 141, 0.2);
  z-index: 1;
  
  .card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .card-content {
    position: relative;
    // display: flex;
    // align-items: center;
    padding: 40rpx;
    height: 100%;
    z-index: 2;
    color: #fff;
    
    .avatar {
      margin-right: 15rpx;
      border: 1rpx solid rgba(255, 255, 255, 0.3);
    }
    
    .info {
      flex: 1;
	  margin-left: 10rpx;
      
      .name-row {
        display: flex;
        align-items: center;
        margin-bottom: 12rpx;
        
        .name {
          font-size: 38rpx;
          font-weight: bold;
          margin-right: 20rpx;
        }
        
        .badge {
          display: flex;
          align-items: center;
          background: rgba(255, 255, 255, 0.3);
          padding: 4rpx 16rpx;
          border-radius: 30rpx;
          font-size: 22rpx;
          
          .role {
            margin-right: 8rpx;
          }
        }
      }
      
      .school {
        font-size: 28rpx;
        opacity: 0.9;
        margin-bottom: 20rpx;
        display: block;
      }
      
      
    }
  }
}
.stats {
        display: flex;
        margin-top: 30rpx;
        .stat-item {
		  width: 30%;
          margin-right: 30rpx;
          text-align: center;
          .stat-value {
            font-size: 30rpx;
            font-weight: bold;
            display: block;
          }
          
          .stat-label {
            font-size: 24rpx;
            opacity: 0.8;
            display: block;
          }
        }
      }

.wallet-card {
  background: #fff;
  border-radius: 24rpx;
  padding: 30rpx;
  position: relative;
  margin-bottom: 30rpx;
  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.03);
  z-index: 1;
  
  .wallet-header {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    
    uni-icons {
      margin-right: 10rpx;
    }
    
    text {
      font-size: 28rpx;
      color: #333;
      font-weight: 500;
    }
  }
  
  .wallet-balance {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 30rpx;
    
    .balance {
      font-size: 48rpx;
      font-weight: bold;
      color: #FF9E00;
    }
    
    .hint {
      font-size: 24rpx;
      color: #999;
    }
  }
  
  .wallet-actions {
    display: flex;
    
    .action-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 15rpx 0;
      background: #FFF9F0;
      border-radius: 12rpx;
      margin-right: 20rpx;
      
      &:last-child {
        margin-right: 0;
      }
      
      uni-icons {
        margin-bottom: 8rpx;
      }
      
      text {
        font-size: 26rpx;
        color: #FF9E00;
      }
    }
  }
}

.role-switch {
  display: flex;
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  margin-bottom: 30rpx;
  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.03);
  padding: 10rpx;
  
  .role-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx;
    color: #999;
    transition: all 0.3s;
    
    &.active {
      color: #FF5C8D;
      background: #FFF0F5;
      border-radius: 12rpx;
      
      .role-icon {
        transform: translateY(-5rpx);
      }
    }
    
    .role-icon {
      width: 80rpx;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      border-radius: 50%;
      margin-bottom: 15rpx;
      box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.05);
      transition: all 0.3s;
    }
    
    text {
      font-size: 26rpx;
    }
  }
}

.menu-container {
  position: relative;
  z-index: 1;
}

.menu-section {
  background: #fff;
  border-radius: 24rpx;
  margin-bottom: 30rpx;
  overflow: hidden;
  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.03);
  
  .section-title {
    display: flex;
    align-items: center;
    padding: 25rpx 30rpx;
    font-size: 30rpx;
    font-weight: 500;
    color: #333;
    border-bottom: 1rpx solid #f5f5f5;
    
    uni-icons {
      margin-right: 15rpx;
    }
  }
  
  .menu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 20rpx 0;
    
    .menu-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20rpx 0;
      
      .item-icon {
        width: 80rpx;
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 20rpx;
        margin-bottom: 15rpx;
      }
      
      text {
        font-size: 26rpx;
        color: #666;
      }
    }
  }
  
  .menu-list {
    .menu-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 25rpx 30rpx;
      border-bottom: 1rpx solid #f5f5f5;
      
      &:last-child {
        border-bottom: none;
      }
      
      .left {
        display: flex;
        align-items: center;
        
        .item-icon {
          width: 60rpx;
          height: 60rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 12rpx;
          margin-right: 20rpx;
        }
        
        text {
          font-size: 30rpx;
          color: #333;
        }
      }
      
      .right {
        display: flex;
        align-items: center;
        
        .badge {
          min-width: 36rpx;
          height: 36rpx;
          line-height: 36rpx;
          text-align: center;
          background: #FF5C8D;
          color: #fff;
          font-size: 22rpx;
          border-radius: 18rpx;
          padding: 0 8rpx;
          margin-right: 15rpx;
        }
      }
    }
  }
}

.bottom-decorator {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60rpx;
  background: #fff;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
  z-index: 0;
}

/* 动画效果 */
.menu-item {
  transition: transform 0.2s;
  
  &:active {
    transform: scale(0.95);
  }
}

/* 响应式调整 */
@media (min-width: 768px) {
  .mine-page {
    max-width: 750px;
    margin: 0 auto;
  }
}
</style>